<style include="cr-shared-style">
  .button-image {
    margin-inline-end: 8px;
  }

  .center {
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .text-button:not(:focus) {
    border: none;
    box-shadow: none;
  }

  .text-button:hover {
    background-color: transparent;
  }

  cr-dialog::part(dialog) {
    border-radius: 0;
    height: 100%;
    width: 100%;
  }

  cr-dialog [slot=body] {
    height: 480px;
  }

  #input-container {
    text-align: center;
  }
</style>
<cr-dialog id="dialog">
  <div slot="title">$i18n{dialogTitle}</div>
  <div slot="body">
    <div id="codeInputView">
      <div id="input-container">
        <c2c-code-input length="6" value="" id="codeInput"></c2c-code-input>
      </div>
      <template is="dom-if" if="[[qrScannerEnabled]]">
        <cr-button on-click="switchToQrInput" class="center text-button">
          <iron-icon class="button-image" icon="cr:videocam"></iron-icon>
          $i18n{useCamera}
        </cr-button>
      </template>
    </div>
    <div id="qrInputView">
      <div>Camera input view</div>
    </div>
    <c2c-error-message id="errorMessage"></c2c-error-message>
  </div>
  <div slot="button-container">
    <cr-button on-click="close" class="cancel-button">$i18n{close}</cr-button>
    <cr-button id="castButton" on-click="addSinkAndCast" class="action-button"
      disabled="[[castButtonDisabled(accessCode)]]">
      $i18n{cast}
    </cr-button>
    <cr-button id="backButton" on-click="switchToCodeInput"
      class="action-button">
      $i18n{back}
    </cr-button>
  </div>
</cr-dialog>
